<template>
	<view class="single-goods">
		<image class="goods-image" mode="aspectFill" :src="data.goods_image"></image>
		<view class="goods-content">
			<view class="goods-title">{{data.goods_name}}</view>
			<view class="goods-price">
				<text class="goods-price-red">￥</text>
				<text class="goods-price-red large">32</text>
				<text class="goods-price-red">/套</text>
				<text class="goods-price-grey">￥300/套</text>
			</view>
			<view class="goods-buy-num">3548人已购买</view>
		</view>
	</view>
</template>

<script>
export default  {
	name: "singleGoods",
	props: {
	  data: Object
	}
}
</script>

<style lang="scss" scoped>
	.single-goods {
		display: flex;
		height: 224rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #ffffff;
		overflow: hidden;
	}
	.goods-image {
		width: 224rpx;
		height: 224rpx;
	}
	.goods-content {
		padding: 33rpx 16rpx 0 26rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	@import url('index.scss');
</style>